<template>
    <div class="app-container">
      <el-row gutter="20">
        <!-- 左侧个人中心 -->
        <el-col :span="6">
            <Usercenter :userInfo="userInfo" ></Usercenter>
        </el-col>

        <!-- 右侧基本资料 -->
        <el-col :span="18">
            <el-card>
                <template v-slot:header>
                    <div class="clearfix card-header">
                    <span class="card-title">基本资料</span>
                    </div>
                </template>
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="资料修改" name="first">
                    <UserInfo :userInfo="userInfo"></UserInfo>
                    </el-tab-pane>

                    <el-tab-pane label="密码修改" name="second">
                    <ResetPwd></ResetPwd>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
    import Usercenter from './components/usercenter.vue';
    import UserInfo from './components/userInfo.vue';
    import ResetPwd from './components/resetPwd.vue';
    import { ref } from 'vue';
    import { computed } from 'vue';
  
    // 读取 userInfo，并确保其有效
    const userInfo = computed(() => {
        const storedUserInfo = localStorage.getItem('userInfo');
        return storedUserInfo ? JSON.parse(storedUserInfo) : null; // 如果没有数据，返回 null
    });
    const activeName = ref('first')
  </script>
  
  <style lang="scss" scoped>
    .app-container {
    flex: 1;
    height: 60vh; 
    }

    .el-card{
        height: 100%;
    }
  .el-row {
  margin-bottom: 20px;
  width: 100%;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    width: 100vh;
  }
  </style>
  